<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>V3</title>   
  </head>
  <body>
    <div id="app">   
      <button @click="editarr"> Edit </button>  
      {{ arr }}  
         {{ message  }}     
         {{ count }}    
    </div>   
  </body>
</html>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
   
  const { createApp } = Vue;
  createApp({    
    data() {
      return {       
        message: "Hello Vue!",     
        count: 0   ,
        obj:  { count: 0 },
        arr: ['foo', 'bar']
      };
    },   
    methods: {
      editarr(){
        this.arr[2] ="娃哈哈"
      },
      inc(){
        this.count++;
      },
      inc1 : _=>{
        // error ：  this指向发生了改变
          // this.count++;
      }
    },
    /**
     * 钩子函数自动调用
     */
     mounted() {
        this.inc();
     },
  }).mount("#app");
</script>
